<template>
	<view class="white-block">
		<view class="bill-type-item" :class="type=='expenditure'?'chosen':''" @click="choose('expenditure')">
			支出
		</view>
		<view class="bill-type-item" :class="type=='income'?'chosen':''" @click="choose('income')">
			收入
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const emit = defineEmits(['change'])

	const type = ref('expenditure') //expenditure、income
	const choose = (chosenType)=>{
		type.value = chosenType
		emit('change', type.value)
	}
</script>

<style lang="less" scoped>
	.white-block{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.bill-type-item{
			flex: 1;
			background: #F5F6F7;
			color: #666666;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			&:nth-child(1){
				border-radius: 16rpx 0 0 16rpx;
			}
			&:nth-child(2){
				border-radius: 0 16rpx 16rpx 0;
			}
			&.chosen{
				background: #6236FF;
				color: #FFFFFF;
			}
		}
	}
</style>